<template>
  <div>
    <!-- 搜索 -->
    <HeadSeach ref="headSeach" />
    <!-- 总采购单 -->
    <div class="app-content">
      <div class="operation">
        <el-button type="primary" class="ml-10" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBatch">删除
        </el-button>
        <el-table ref="table" :data="list.data" style="width: 100%" size="small" row-key="id" :height="minHeight/2" @selection-change="selectionChange">
          <el-table-column type="selection" min-width="30" />
          <el-table-column label="采购单号" min-width="20" prop="id">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="seeDetails(scope.row.id)">{{ scope.row.id }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="采购单类型" min-width="30">
            <template slot-scope="scope">
              {{ scope.row.type==='goods'?'商品':'原料' }}
            </template>
          </el-table-column>
          <el-table-column label="制单时间" min-width="50" prop="create_time" />
          <el-table-column label="状态" min-width="30">
            <template slot-scope="scope">
              <div v-if="scope.row.verify_status === 0" class="primary_row row_div">待确认</div>
              <div v-if="scope.row.verify_status === 1" class="success_row">已确认</div>
              <div v-if="scope.row.verify_status === 2" class="danger_row">已作废</div>
            </template>
          </el-table-column>
          <el-table-column label="制单员" min-width="30" prop="create_user" />
          <el-table-column label="确认人" min-width="30" prop="verify_user" />
          <el-table-column label="财务" min-width="30" prop="audit_user" />
          <el-table-column label="财务审核" min-width="30">
            <template slot-scope="scope">
              <div v-if="scope.row.audit_status === 0" class="primary_row row_div">待审核</div>
              <div v-if="scope.row.audit_status === 1" class="success_row">已审核</div>
            </template>
          </el-table-column>
          <el-table-column label="财务审核时间" min-width="50" prop="audit_time" />
          <el-table-column label="入库状态" min-width="30">
            <template slot-scope="scope">
              <div v-if="scope.row.stock_status === 2" class="primary_row row_div">部分入库</div>
              <div v-if="scope.row.stock_status === 1" class="success_row">全部入库</div>
              <div v-if="scope.row.stock_status === 0" class="danger_row">未入库</div>
            </template>
          </el-table-column>
          <el-table-column label="确认时间" min-width="50" prop="verify_time" />
          <el-table-column label="备注" min-width="60" prop="desc">
            <template slot-scope="scope">
              <el-input v-model="scope.row.desc" placeholder="" size="mini" />
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="50">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="editValue(scope.row.id)">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination ref="pagination" />
      </div>
    </div>
    <Details ref="details" />
  </div>
</template>
<script>
import { PurchaseUnify } from '@/api/purchase/purchaseUnify'
import Pagination from '@/components/Pagination'
import { getMinH } from '@/utils/public'
import Details from './components/details'
import { Admin } from '@/api/system/admin'
import HeadSeach from '@/components/HeadSeach'
export default {
  name: 'PurchaseList',
  components: {
    Pagination,
    Details,
    HeadSeach
  },
  data() {
    return {
      seach: {},
      list: { data: [] },
      pagination: {
        page: 1,
        per_page: 30
      },
      minHeight: 500
    }
  },
  created() {
    this.getPurchasePage()
  },
  mounted() {
    this.assembleSeachData()
  },
  methods: {
    // 组装搜索数据
    async assembleSeachData() {
      const adminList = await Admin.listAdmin().then((res) => { return res.data }).catch(() => {})
      const searchData = {
        label: '采购单搜索',
        size: 'small',
        model: {
          id: '',
          real_name: '',
          status: '',
          role_id: ''
        },
        options: [{
          tag: 'Input',
          prop: 'id',
          placeholder: '采购单号'
        },
        {
          tag: 'Select',
          prop: 'create_user_id',
          placeholder: '制单人',
          data: adminList,
          showPropData: {
            label: 'real_name',
            value: 'id'
          }
        },
        {
          tag: 'Select',
          prop: 'audit_user_id',
          placeholder: '审核人',
          data: adminList,
          showPropData: {
            label: 'real_name',
            value: 'id'
          }

        },
        {
          tag: 'Select',
          prop: 'verify_status_id',
          placeholder: '确认人',
          data: adminList,
          showPropData: {
            label: 'real_name',
            value: 'id'
          }

        }],
        cb: (data) => {
          this.seach = data
          this.pagination.page = 1
          this.getPurchasePage()
        }
      }
      this.$refs.headSeach.init(searchData)
    },
    // 搜索
    searchBox(val) {
      if (val === 'reset') {
        this.seach = {}
        this.currentPage = 1
      }
      this.getPurchasePage()
    },
    delBatch() {},
    add() {},
    selectionChange() {},
    editValue() {},
    getPurchasePage() {
      PurchaseUnify.pagePurchaseUnify({ ...this.pagination, ...this.seach }).then((res) => {
        this.list = res.data
        this.initPagination({
          page: res.data.current_page,
          total: res.data.total,
          per_page: res.data.per_page
        })
        this.$nextTick(() => {
          this.minHeight = getMinH(this, 'table', 'pagination')
        })
      }).catch(() => {})
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.getPurchasePage()
      } })
    },
    // 查看子采购单
    seeDetails(id) {
      this.$refs.details.show(id)
    }
  }
}
</script>
